import React from 'react'
import { Table, Input, Popconfirm ,Select,Form,Divider,Cascader} from 'antd';
import { observer, inject } from 'mobx-react'
import _ from 'lodash'
import util from '../../../common/util'
import '../../../../style/less/exhibition.less'

const Option = Select.Option;
const FormItem = Form.Item

@inject("store")
@observer
class ExhibitorTable extends React.Component {
    constructor() {
        super();
    }
    render() {
        let {form,store}=this.props;
        let {actions,expoData,hasRe}=store
        let halls=[];
        store.halls.map((hall)=>{
            halls.push(<Option key={hall.id}>{hall.value}</Option>);
        })
        const getStandName=(areaId,standId)=>{
            let name=''
            store.areas.map((area)=>{
                if(area.value==areaId){
                    area.children.map((stand)=>{
                        if(stand.value==standId){
                            name=(<span>{area.label}/{stand.label}</span>)
                        }
                    })
                }
            })
            return name;
        }
        const renderColumns=(text, record, column,index) =>{
            return (
                store.editIndex==index?(<FormItem
                    hasFeedback
                    validateStatus={hasRe==1?"success":hasRe==-1||hasRe==-3?"error":hasRe==-2?"validating":null}
                    help={hasRe==1?"展位可用":hasRe==-1?"展位已被占用":hasRe==-3?"请选择展位！":null}
                >
                    {form.getFieldDecorator(`stand[${index}]`, {
                        rules: [{ required: true, message: '请选择展位!' }],
                    })(
                        <Cascader size="small" defaultValue={[record.areaId,record.standId]} options={store.areas} onChange={actions.standChanges} placeholder="请选择展位"/>
                    )}
                </FormItem>):(
                    <span>{getStandName(record.areaId,record.standId)}</span>
                )
            );
        }
        const columns = [{
            title: '企业名称',
            dataIndex: 'name',
            width:200,
        },{
            title: '所在展位',
            dataIndex: 'stand',
            render: (text, record,index) => renderColumns(text, record, 'stand',index),
            width:350,
        }, {
            title: '操作',
            dataIndex: 'operation',
            render: (text, record,index) => {
                return (
                    store.editIndex==index?(<span>
                            <a onClick={()=>actions.saveCompany(index,form)}>保存</a>
                            <Divider type="vertical" />
                            <a onClick={()=>actions.cancelEdit()}>取消</a>
                        </span>):(<span>
                        <a onClick={()=>actions.setEdit(index)}>编辑</a>
                            <Divider type="vertical" />
                            <Popconfirm
                                title="确认删除参展商吗?"
                                onConfirm={() => actions.delCompany(index)}
                            >
                            <a>删除</a>
                            </Popconfirm>
                        </span>
                    )
                );
            },
        }];

        return <Table
            bordered
            dataSource={store.expoData.slice()}
            columns={columns}
            pagination={{
                total: store.pageTotal,
                onChange:actions.pageChange,
            }}
        />;
    }
}

export default ExhibitorTable
